<!--
 * @Author: fengxx
 * @Date: 2025-09-28 17:06:32
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-10 10:16:02
-->
<script setup lang="ts">
import router from '@/router'
import type { FormInstance, FormRules } from 'element-plus'
import { computed, reactive, ref } from 'vue'

const ruleFormRef = ref<FormInstance>()

interface FormData {
  name: string
  status: boolean
  desc: string
}

// 控制弹框显示/隐藏
const visible = ref(false)
// 列表数据
const tableData = reactive([
  {
    id: 1,
    name: '事项1',
    status: false,
    desc: '下午吃哈密瓜',
  },
])

// 表单数据
const formData = reactive<FormData>({
  name: '',
  status: false,
  desc: '',
})

const rules = reactive<FormRules<FormData>>({
  name: [
    { required: true, message: '请输入事项名称', trigger: 'blur' },
    { min: 1, max: 15, message: '长度在1~15之间', trigger: 'blur' },
  ],
  desc: [{ min: 0, max: 64, message: '长度在0~64之间', trigger: 'blur' }],
})

const onAdd = () => {
  formData.name = ''
  formData.desc = ''
  formData.status = false
  visible.value = true
}

// 删除列表一行
const del = (index: number) => {
  tableData.splice(index, 1)
}
// 新增的提交事件
const onCommit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      tableData.push({
        ...formData,
      })
      visible.value = false
    } else {
      console.log('提交失败', fields)
    }
  })
}

const jumpToDetail = (id: number) => {
  router.push({
    name: 'todoDetail',
    query: {
      id,
    },
  })
  // console.log(id)
}
// 列表总数
const tableTotal = computed(() => tableData.length)
const finishedTotal = computed(() => tableData.filter((item) => item.status).length)
</script>
<template>
  <el-button type="primary" @click="onAdd">新增</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="status" label="状态">
      <template #default="scope"><el-switch v-model="scope.row.status" /></template>
    </el-table-column>
    <el-table-column prop="desc" label="描述" />
    <el-table-column prop="action" label="操作">
      <template #default="scope">
        <el-button type="primary" link @click="jumpToDetail(scope.row.id)"> 详情 </el-button>
        <el-popconfirm
          title="确认删除该条信息吗？删除后不可恢复！"
          placement="top-start"
          @confirm="del(scope.$index)"
        >
          <template #reference>
            <el-button type="primary" link> 删除 </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <div>{{ `共有${tableTotal}条数据，已完成${finishedTotal}条` }}</div>
  <el-dialog v-model="visible" title="Tips" width="500">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="formData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch v-model="formData.status" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" :rows="2" type="textarea" placeholder="请输入描述" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onCommit(ruleFormRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
